<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${pageTitle ?: '同步平台 - 仪表盘'}">同步平台 - 仪表盘</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- Sidebar Navigation -->
            <nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-dark sidebar collapse">
                <div class="position-sticky pt-3">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/}">
                                <i class="bi bi-house"></i> 首页
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" th:href="@{/dashboard}">
                                <i class="bi bi-speedometer2"></i> 仪表盘
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/server}">
                                <i class="bi bi-server"></i> 服务器管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/database}">
                                <i class="bi bi-database"></i> 数据库管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/sync/database}">
                                <i class="bi bi-arrow-left-right"></i> 数据库同步
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/sync/file}">
                                <i class="bi bi-files"></i> 文件同步
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/restore}">
                                <i class="bi bi-arrow-counterclockwise"></i> 数据库恢复
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/task/log}">
                                <i class="bi bi-list-check"></i> 同步日志
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
            
            <!-- Main Content -->
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">仪表盘</h1>
                </div>
                
                <!-- Summary Cards -->
                <div class="row">
                    <div class="col-md-3">
                        <div class="card mb-4 text-white bg-primary">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h5 class="card-title">服务器</h5>
                                        <h2 class="mb-0" th:text="${serverCount ?: 0}">0</h2>
                                    </div>
                                    <div>
                                        <i class="bi bi-server fs-1"></i>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <a th:href="@{/server}" class="text-white">查看详情 <i class="bi bi-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card mb-4 text-white bg-success">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h5 class="card-title">数据库</h5>
                                        <h2 class="mb-0" th:text="${databaseCount ?: 0}">0</h2>
                                    </div>
                                    <div>
                                        <i class="bi bi-database fs-1"></i>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <a th:href="@{/database}" class="text-white">查看详情 <i class="bi bi-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card mb-4 text-white bg-info">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h5 class="card-title">同步任务</h5>
                                        <h2 class="mb-0" th:text="${taskCount ?: 0}">0</h2>
                                    </div>
                                    <div>
                                        <i class="bi bi-arrow-left-right fs-1"></i>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <a th:href="@{/sync/task}" class="text-white">查看详情 <i class="bi bi-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card mb-4 text-white bg-warning">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h5 class="card-title">今日同步</h5>
                                        <h2 class="mb-0" th:text="${todaySyncCount ?: 0}">0</h2>
                                    </div>
                                    <div>
                                        <i class="bi bi-calendar-check fs-1"></i>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <a th:href="@{/task/log}" class="text-white">查看详情 <i class="bi bi-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Recent Tasks -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">最近执行的任务</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>任务名称</th>
                                        <th>任务类型</th>
                                        <th>执行时间</th>
                                        <th>状态</th>
                                        <th>同步数量</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:if="${recentLogs != null && !recentLogs.empty}" th:each="log : ${recentLogs}">
                                        <td th:text="${log.taskName}">示例任务</td>
                                        <td th:text="${log.taskType == 1 ? '数据库同步' : '文件同步'}">数据库同步</td>
                                        <td th:text="${#temporals.format(log.startTime, 'yyyy-MM-dd HH:mm:ss')}">2023-01-01 12:00:00</td>
                                        <td>
                                            <span th:if="${log.status == 1}" class="badge bg-success">成功</span>
                                            <span th:if="${log.status == 0}" class="badge bg-danger">失败</span>
                                        </td>
                                        <td th:text="${log.syncCount}">100</td>
                                        <td>
                                            <a th:href="@{/task/log/{id}(id=${log.id})}" class="btn btn-sm btn-outline-primary">
                                                <i class="bi bi-eye"></i> 查看
                                            </a>
                                        </td>
                                    </tr>
                                    <tr th:if="${recentLogs == null || recentLogs.empty}">
                                        <td colspan="6" class="text-center">暂无任务执行记录</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- Quick Actions -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">快捷操作</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <a th:href="@{/server/add}" class="btn btn-outline-primary btn-lg w-100 mb-2">
                                    <i class="bi bi-plus-circle"></i> 添加服务器
                                </a>
                            </div>
                            <div class="col-md-3">
                                <a th:href="@{/database/add}" class="btn btn-outline-success btn-lg w-100 mb-2">
                                    <i class="bi bi-plus-circle"></i> 添加数据库
                                </a>
                            </div>
                            <div class="col-md-3">
                                <a th:href="@{/sync/database/add}" class="btn btn-outline-info btn-lg w-100 mb-2">
                                    <i class="bi bi-plus-circle"></i> 新建数据库同步
                                </a>
                            </div>
                            <div class="col-md-3">
                                <a th:href="@{/sync/file/add}" class="btn btn-outline-warning btn-lg w-100 mb-2">
                                    <i class="bi bi-plus-circle"></i> 新建文件同步
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>
    <script th:src="@{/js/script.js}"></script>
</body>
</html> 